<template>
    <div>
        <div class="c-title">
            <h2>临港集团-医疗器械产业数据化大屏</h2>
            <p>
                {{nowTime}}
            </p>
        </div>
        <div class="left-label" v-show="park" @click="handleBack">返回</div>
        <div class="right-nav">
            <div class="child">
                <div class="features qp">
                    <span>
                        <img v-if="fullScreenStatus" @click="HandFullScreen" src="@/assets/x1/QP.png" alt=""/>
                        <img v-if="!fullScreenStatus" @click="HandCancelFullScreen" src="@/assets/x1/SS.png" alt=""/>
                    </span>
                </div>
                <!--<div class="features">
                    <span><img @click="HandQuitSystem" src="@/assets/x1/TC.png" alt=""/></span>
                </div>-->
            </div>
        </div>
    </div>
</template>
<script>
let nowTimeInterval
export default {
    name: 'Headers',
    data() {
        return {
            nowTime: '',
            nickName: '',
            fullScreenStatus: true,
            park: false,
            noBack: true
        }
    },
    mounted() {
        this.nowTime = this.$lib.nowTime()
        nowTimeInterval = setInterval(() => {
            this.nowTime = this.$lib.nowTime()
        }, 1000)
    },
    watch: {
        '$route': {
            handler: function (to, from) {
                this.park = to.fullPath !== '/screen/country'
                this.noBack = from === undefined
            },
            immediate: true
        }
    },
    methods: {
        HandQuitSystem() {
            this.$Modal.confirm({
                title: '是否确认退出',
                // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                onOk: () => {
                    this.$store.dispatch('app/resetToken')
                    this.$router.push({'name': 'login'})
                },
                onCancel: () => {
                }
            });
        },
        handleBack() {
            if (this.noBack) {
                this.$router.replace('/screen/country')
            } else {
                this.$router.back(-1)
            }
        },
        HandFullScreen() {
            (function fullScreen() {
                var el = document.documentElement;

                var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||

                    el.mozRequestFullScreen || el.msRequestFullScreen;

                if (typeof rfs != "undefined" && rfs) {

                    rfs.call(el);

                } else if (typeof window.ActiveXObject != "undefined") {

                    //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏

                    var wscript = new ActiveXObject("WScript.Shell");

                    if (wscript != null) {

                        wscript.SendKeys("{F11}");

                    }

                }
            })()
            this.fullScreenStatus = false
            // this.$router.go(0)
        },
        HandCancelFullScreen() {
            (function exitFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            })()
            this.fullScreenStatus = true
            // this.$router.go(0)
        }
    },
    destroyed() {
        clearInterval(nowTimeInterval);
    }
}
</script>
<style scoped lang="scss">
.c-title {
    width: screenVw(38);
    background: url('../../assets/x1/top.png');
    background-size: 100% 100%;
    margin: 0 auto;
    text-align: center;

    h2 {
        font-size: screenVw(1.2);
        padding: screenVw(.8) 0 screenVw(.6);
        color: #02eeff;
    }

    p {
        font-size: screenVw(.9);
        color: #b3e2ff;
        padding: screenVw(.2) 0 screenVw(.5) 0;
    }
}

.left-label {
    position: absolute;
    top: 1.4vw;
    left: 1.4vw;
    background: url('../../assets/x1/MC_D.png');
    background-size: 100% 100%;
    font-size: screenVw(1);
    color: #90F2FF;
    padding: screenVw(.4) screenVw(1.4);
    cursor: pointer;
}

.right-nav {
    position: absolute;
    top: 1.4vw;
    right: 1.4vw;
    width: 20vw;
    text-align: right;

    .child {
        position: relative;
    }
}

.features {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: screenVw(6);
    height: screenVw(2);
    text-align: center;
    line-height: screenVw(2.4);
    background: url('../../assets/x1/TC_D.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    img {
        width: screenVw(1.2);;
    }
}

.features:hover {
    background: url('../../assets/x1/QP_D.png') no-repeat;
    background-size: 100% 100%;
}

.qp {
    /*right: screenVw(3.8);*/
}
</style>